<template>
  <el-dialog
    v-el-drag-dialog
    :title="'资金科目匹配'"
    :visible.sync="visible"
    width="80%"
    min-width="1024px"
    @close="reset"
  >
    <div class="pageMain">
      <div class="left">
        <div class="headerTitle">收入项目匹配</div>
        <el-card class="box-card  cardBox">
          <ul v-for="(l,i) in MainData.inFeeList" :key="i" class="items">
            <li class="leftItem">
              {{ l.feeName }}
            </li>
            <li class="rightItem">
              <el-select v-model="l.subjectCode" style="width: 100%;" clearable>
                <el-option v-for="(n,m) in MainData.inSubjectList" :key="m" :label="n.subjectName" :value="n.subjectCode" />
              </el-select>
            </li>
          </ul>
        </el-card>
      </div>
      <div class="right">
        <div class="headerTitle">支出项目匹配 </div>
        <el-card class="box-card  cardBox">
          <ul v-for="(l,i) in MainData.outFeeList" :key="i" class="items">
            <li class="leftItem">
              {{ l.feeName }}
            </li>
            <li class="rightItem">
              <el-select v-model="l.subjectCode" style="width: 100%;" clearable>
                <el-option v-for="(n,m) in MainData.outSubjectList" :key="m" :label="n.subjectName" :value="n.subjectCode" />
              </el-select>
            </li>
          </ul>
        </el-card>
      </div>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.success" type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { accountSubjectMatch, accountSubjectMatchData } from '@/api'
  export default {
    name: 'matching',
    components: {

    },
    data() {
      return {
        visible: false,
        query: {

        },
        MainData: {
          inFeeList: [],
          inSubjectList: [],
          outFeeList: [],
          outSubjectList: []

        }

      }
    },
    methods: {
      open(param) {
        this.getData()
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getData() {
        const res = await accountSubjectMatchData()
        const list = {}
        for (var value in res.data) {
          list[value] = JSON.parse(res.data[value])
        }
        this.MainData = list
      },
      async success() {
        var list = this.MainData.inFeeList.concat(this.MainData.outFeeList)
        var submitList = list.map(l => {
          return { feeType: l.feeType, subjectCode: l.subjectCode }
        })
        await accountSubjectMatch(submitList)
        this.resolve()
        this.visible = false
        this.$notify({
          title: '提示',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
      },
      reset() {
        this.visible = false
      }
    }

  }
</script>

<style lang="scss" scoped>
.pageMain {
  display: flex;
  width: 100%;
  .left {
    width: 50%;
    margin-right: 10px;
    // padding:10px
  }
  .right {
    width: 50%;
    // padding:10px
  }
  .headerTitle {
    padding: 5px 10px;
    font-size: 15px;
    font-weight: 700;
    color: #373a3c;
    background: #e3e3e3;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }
  .cardBox {
    height: 400px;
    overflow: auto;
    //  /deep/ .el-card__body {
    // // padding:5px 10px;
    //      padding: 0;
    //    }
    /deep/ .el-card__header {
      // height: 32px;
      padding: 5px 10px;
      font-size: 15px;
      font-weight: bold;
      // padding: 0;
      // line-height: 32px;
      color: #373A3C;
      background: #e3e3e3;
      border: 1px solid #ddd;
      box-sizing: border-box;
    }
    .items {
      display: flex;
      justify-content: space-between;
      margin: 5px 0;
      .leftItem {
        width: 70%;
      }
      .rightItem {
        width: 30%;
      }
    }
  }
}
</style>

